<template>
  <div class="content-box" ref="content">
    <div class="c-left">
      <div class="c-l-top shadow-box ">
        <div class="title-box">
          <img src="~@img/project/icon-xmgl.png" alt="" />
          <span>太原市项目概览</span>
        </div>
        <ul class="project-list clearfix">
          <li>
            <img src="~@img/project/icon-xmgl-02.png" alt="" />
            <p class="title">在谈项目</p>
            <p class="num">
              <span>{{ projectNums.project1_obj }}</span
              >个
            </p>
          </li>
          <li>
            <img src="~@img/project/icon-xmgl-03.png" alt="" />
            <p class="title">已签约项目</p>
            <p class="num">
              <span>{{ projectNums.project2_obj }}</span
              >个
            </p>
          </li>
          <li>
            <img src="~@img/project/icon-xmgl-04.png" alt="" />
            <p class="title">已开工项目</p>
            <p class="num">
              <span>{{ projectNums.project3_obj }}</span
              >个
            </p>
          </li>
          <!-- <li>
            <img src="~@img/project/icon-xmgl-05.png" alt="" />
            <p class="title">已投产项目</p>
            <p class="num">
              <span>{{ projectNums.project4_obj }}</span
              >个
            </p>
          </li>
          <li class="last">
            <p>
              <span class="yuan"></span>
              拟签约项目
              <span class="num">{{ projectNums.project5_obj }}</span>
              个
            </p>
            <p>
              <span class="yuan"></span>
              拟开工项目
              <span class="num">{{ projectNums.project6_obj }}</span>
              个
            </p>
            <p>
              <span class="yuan"></span>
              拟投产项目
              <span class="num">{{ projectNums.project7_obj }}</span>
              个
            </p>
          </li> -->
        </ul>
      </div>
      <div class="c-l-bottom shadow-box ">
        <div class="chart-map">
          <div
            :class="['ty', district == '' ? 'active' : '']"
            @click="changeActiveDistrict('')"
          >
            太原市总览
          </div>
          <!-- <div
            :class="['tx', district == '太忻一体化' ? 'active' : '']"
            @click="changeActiveDistrict('太忻一体化')"
          >
            <span class="yuan">
              <span></span>
            </span>
            <span>太忻一体化经济区</span>
          </div> -->
          <div class="chart-self" ref="chartMap"></div>
        </div>
        <div class="trapezoid">
          <div class="title-box">
            <img src="~@img/project/icon-jdtjt.png" alt="" />
            <span :style="district == '太忻一体化' ? 'font-size:14px' : ''">
              {{
                district == ""
                  ? "太原市"
                  : district == "太忻一体化"
                  ? "太忻一体化经济区（太原区）"
                  : district
              }}项目阶段统计图</span
            >
          </div>
          <div class="chart-trapezoid">
            <div class="chart-self" ref="chartTrapezoid"></div>
          </div>
          <!-- <div class="last">
            <p>
              <span class="yuan"></span>
              拟签约项目
              <span class="num">{{ nodeList.node5 }}</span>
              个
            </p>
            <p>
              <span class="yuan"></span>
              拟开工项目
              <span class="num">{{ nodeList.node6 }}</span>
              个
            </p>
            <p>
              <span class="yuan"></span>
              拟投产项目
              <span class="num">{{ nodeList.node7 }}</span>
              个
            </p>
          </div> -->
        </div>
      </div>
    </div>
    <div class="c-right shadow-box ">
      <div class="title-box">
        <img src="~@img/project/icon-phb.png" alt="" />
        <span>{{ scoreCycle }}太原市县（市、区）、开发区排行</span>
      </div>
      <div style="margin-top:24px;padding-right: 16px;">
        <table>
          <tr>
            <th width="120">排名</th>
            <th>县（市、区）、开发区</th>
            <th width="120">分数</th>
          </tr>
        </table>
      </div>
      <div class="table-box">
        <table>
          <tr v-for="(item, index) of scoreList" :key="index">
            <td width="120">{{ index + 1 }}</td>
            <td>{{ item.district }}</td>
            <td width="120">
              {{ item.score }}
              <img
                v-if="item.trend == 1"
                src="@img/resources/icon-red.png"
                alt=""
              />
              <img
                v-if="item.trend == -1"
                src="@img/resources/icon-green.png"
                alt=""
              />
            </td>
          </tr>
        </table>
      </div>
    </div>
    <el-dialog
      class="not-padding tips-dialog"
      title="项目提醒"
      :visible.sync="showDialog"
      :show-close="false"
    >
      <div>
        <div class="remind-box">
          <span v-for="(item, index) of projectList" :key="item">
            《{{ item }}》{{ index == projectList.length - 1 ? " " : "、" }}
          </span>
        </div>
        <p class="tips">以上项目两个月内没有更新，请及时进行更新！</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ty from "@map/ty-index.json";
import dotActive from "@img/public/icon-dot-active.png";
import dotNormal from "@img/public/icon-dot-normal.png";
import {
  GetScore,
  UpgradeRemind,
  ProjectMap,
  Overview,
} from "@/api/project_three";
export default {
  // inject: ["reload"],
  data() {
    return {
      showDialog: false,
      projectList: [],
      district: "",
      nodeList: {
        node1: 0,
        node2: 0,
        node3: 0,
        node4: 0,
        node5: 0,
        node6: 0,
        node7: 0,
      },
      chartMap: null,
      chartTrapezoid: null,
      scoreList: [],
      scoreCycle: "",
      projectNums: {
        project1_obj: 0,
        project2_obj: 0,
        project3_obj: 0,
        project4_obj: 0,
        project5_obj: 0,
        project6_obj: 0,
        project7_obj: 0,
      },
    };
  },
  mounted() {
    this.initMap();
    this.initTrapezoid();
    this.getProjectNode();
    this.getScore();
    this.getRemind();
    this.getNodeList();
  },
  methods: {
    async getScore() {
      let res = await GetScore();
      if (res.code && res.code != 0) {
        this.scoreList = [];
      } else {
        this.scoreList = res.map((item, index) => {
          item.index = index;
          return item;
        });
        this.scoreCycle = res[0] ? res[0].time : "";
      }
    },
    async getRemind() {
      let res = await UpgradeRemind();
      console.log(res);
      if (res.code && res.code != 0) {
      } else {
        this.showDialog = true;
        this.projectList = res;
      }
    },
    async getProjectNode() {
      let res = await Overview();
      console.log(res);
      if (res.code && res.code != 0) {
        this.projectNums = {
          project1_obj: 0,
          project2_obj: 0,
          project3_obj: 0,
          project4_obj: 0,
          project5_obj: 0,
          project6_obj: 0,
          project7_obj: 0,
        };
      } else {
        this.projectNums = res;
      }
    },
    async getNodeList() {
      let res = await ProjectMap({
        district_name: this.district,
      });
      if (res.code && res.code != 0) {
        this.nodeList = {
          node1: 0,
          node2: 0,
          node3: 0,
          node4: 0,
          node5: 0,
          node6: 0,
          node7: 0,
        };
      } else {
        this.nodeList = {
          node1: 0,
          node2: 0,
          node3: 0,
          node4: 0,
          node5: 0,
          node6: 0,
          node7: 0,
          ...res,
        };
        this.upDataTrapezoid();
      }
    },
    changeActiveDistrict(district) {
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      if (district == "太忻一体化") {
        this.chartMap.dispatchAction({
          type: "highlight",
          seriesName: "开发区",
          name: [
            // "中北高新区",
            // "阳曲示范区",
            // "西山示范区",
            // "中北高新区-太忻",
            // "阳曲示范区-太忻",
            // "西山示范区-太忻",
            "阳曲县-太忻",
            "古交市-太忻",
            "尖草坪区-太忻",
            "万柏林区-太忻",
            "杏花岭区-太忻",
            "迎泽区-太忻",
            "太忻一体化经济区（太原区）",
          ],
        });
        this.chartMap.dispatchAction({
          type: "highlight",
          seriesName: "行政区",
          name: [
            "阳曲县",
            "古交市",
            "尖草坪区",
            "万柏林区",
            "杏花岭区",
            "迎泽区",
          ],
        });
      }
      this.district = district;
      this.getNodeList();
    },
    initTrapezoid() {
      this.chartTrapezoid = this.$echarts.init(this.$refs.chartTrapezoid);
      let data = [
        { num: 0, value: 80, name: "在谈项目" },
        { num: 0, value: 60, name: "已签约项目" },
        { num: 0, value: 40, name: "已开工项目" },
        // { num: 0, value: 20, name: "已投产项目" },
      ];
      const initOption = {
        color: ["#fdbd58", "#3ed9be", "#8fb3ff", "#a472e5"],
        series: [
          {
            top: "10%",
            left: "10%",
            bottom: "10%",
            type: "funnel",
            width: "80%",
            gap: 4,
            minSize: "40%",
            maxSize: "80%",
            label: {
              show: true,
              position: "inside",
              formatter: (parma) => {
                return parma.data.name + parma.data.num + "个";
              },
            },
            data: data,
          },
        ],
      };
      this.chartTrapezoid.setOption(initOption);
    },
    initMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return "";
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              (params.componentSubType == "scatter"
                ? params.data.value[2]
                : params.data.value) +
              "个项目"
            );
          },
        },
        // visualMap: [
        //   {
        //     show: true,
        //     // seriesIndex: 0,
        //     min: 0,
        //     max: 10,
        //     // top: 10,
        //     color: ["#d73027", "#f46d43", "#fdae61"],
        //     seriesIndex: "0",
        //   },
        // ],
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "#fff",
            textBorderColor: "#e28157",
            textBorderWidth: 2,
            formatter: function(params) {
              // return "{normalIcon|}" + " " + params.name;
              return params.name;
            },
            rich: {
              normalIcon: {
                backgroundColor: {
                  image: dotNormal,
                },
              },
              activeIcon: {
                backgroundColor: {
                  image: dotActive,
                },
              },
            },
            fontSize: 16,
          },
          itemStyle: {
            areaColor: "#ffbe5f",
            borderColor: "#FFFFFF",
            borderWidth: 1,
          },
          select: {
            itemStyle: {
              areaColor: "#f46d43",
              color: "#f46d43",
            },
            label: {
              show: true,
              color: "#333",
              textBorderColor: "#e28157",
              textBorderWidth: 1,
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "#333",
              textBorderColor: "#e28157",
              textBorderWidth: 1,
              formatter: function(params) {
                //标签内容
                // return "{activeIcon|}" + " " + params.name;
                return params.name;
              },
            },
            itemStyle: {
              areaColor: "#f46d43",
              label: {
                show: true,
                color: "#333",
              },
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            label: {
              position: "right",
              offset: [30, 40],
              z: 10,
            },
            symbol: "none",
            //
            // emphasis: {
            //   itemStyle: {
            //     areaColor: "#f46d43",
            //   },
            // },
            // itemStyle: {
            //   emphasis: {
            //     areaColor: "#f46d43",
            //   },
            // },
            data: [],
          },
          {
            type: "lines",
            name: "开发区",
            z: 3,
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: [8, 0],
            color: "#F57446",
            opacity: 1,
            label: {
              show: true,
              position: "end",
              formatter: [`{title|{b}}`].join("\n"),
              backgroundColor: "rgba(250, 185, 162, 1)",
              borderRadius: 4,
              align: "center",
              width: 90,
              rich: {
                title: {
                  align: "center",
                  lineHeight: 28,
                  fontSize: 12,
                  color: "#fff",
                  width: 90,
                  height: 28,
                  borderRadius: [4, 4, 0, 0],
                },
                title_active: {
                  align: "center",
                  lineHeight: 28,
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#fff",
                  backgroundColor: "rgba(209, 68, 18, 1)",
                  width: 90,
                  height: 28,
                  borderRadius: [4, 4, 0, 0],
                },
              },
            },
            lineStyle: {
              type: "solid",
              opacity: 1,
              width: 2,
              color: "rgba(245, 116, 70, .6)",
              curveness: 0,
            },
            emphasis: {
              label: {
                formatter: [`{title_active|{b}}`].join("\n"),
              },
              lineStyle: {
                type: "solid",
                opacity: 1,
                color: "rgba(209, 68, 18, .6)",
                curveness: 0,
              },
            },
            data: [
              {
                coords: [
                  [112.570721979812, 37.9718734652464],
                  [113, 37.9718734652464],
                ],
                name: "中北高新区",
                value: 5,
              },
              {
                coords: [
                  [112.365286246971, 37.6133580518845],
                  [113, 37.6133580518845],
                ],
                name: "清徐开发区",
                value: 0,
              },
              {
                coords: [
                  [112.679409, 38.064621],
                  [113, 38.064621],
                ],
                name: "阳曲示范区",
                value: 0,
              },
              {
                coords: [
                  [112.342, 37.882],
                  [113, 37.882],
                ],
                name: "西山示范区",
                value: 0,
              },
              // {
              //   coords: [
              //     [112.570721979812, 37.9718734652464],
              //     [112.34, 38.16],
              //   ],
              //   label: {
              //     show: false,
              //   },
              //   symbol: "",
              //   symbolSize: [1, 0],
              //   name: "中北高新区-太忻",
              //   value: 5,
              // },

              // {
              //   coords: [
              //     [112.679409, 38.064621],
              //     [112.34, 38.16],
              //   ],
              //   label: {
              //     show: false,
              //   },
              //   symbolSize: [1, 0],
              //   name: "阳曲示范区-太忻",
              //   value: 0,
              // },
              // {
              //   coords: [
              //     [112.526291497339, 37.872764219517],
              //     [112.34, 38.16],
              //   ],
              //   label: {
              //     show: false,
              //   },
              //   symbolSize: [1, 0],
              //   name: "西山示范区-太忻",
              //   value: 0,
              // },
              {
                coords: [
                  [112.56, 38.128],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "阳曲县-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.174353, 37.95],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "古交市-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.47, 38.0],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "尖草坪区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.361, 37.91],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "万柏林区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.62, 37.9],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "杏花岭区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.62, 37.84],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "迎泽区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.34, 38.05],
                  [112.34, 38.33],
                ],
                symbolSize: [1, 0],
                label: {
                  width: 170,
                  rich: {
                    title: {
                      width: 170,
                    },
                    title_active: {
                      width: 170,
                    },
                  },
                },
                name: "太忻一体化经济区（太原区）",
                value: 0,
              },
            ],
          },
          // {
          //   name: "开发区",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbolSize: 10,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   label: {
          //     show: true,
          //     // formatter: "  {b}",
          //     position: "right",
          //     color: "#333",
          //     textBorderColor: "#e28157",
          //     textBorderWidth: 1,
          //     fontSize: 14,
          //     formatter: function(params) {
          //       //标签内容
          //       return params.name;
          //     },
          //   },
          //   select: {
          //     itemStyle: {
          //       color: "#333",
          //     },
          //     label: {
          //       show: true,
          //       color: "#333",
          //       textBorderColor: "#e28157",
          //       textBorderWidth: 1,
          //       formatter: function(params) {
          //         //标签内容
          //         return params.name;
          //       },
          //     },
          //   },
          //   itemStyle: {
          //     color: "rgba(254, 228, 203)",
          //     shadowBlur: 10,
          //     shadowColor: " rgba(255,255,255, 0.2)",
          //   },
          //   emphasis: {
          //     label: {
          //       show: true,
          //       show: true,
          //       color: "#333",
          //       textBorderColor: "#e28157",
          //       textBorderWidth: 1,
          //       formatter: function(params) {
          //         //标签内容
          //         return params.name;
          //       },
          //     },
          //     itemStyle: {
          //       color: "rgba(255,255,255)",
          //       shadowBlur: 10,
          //       shadowColor: " rgba(255,255,255, 0.2)",
          //     },
          //   },
          //   selectedMode: "single",
          //   zlevel: 1,
          //   data: [
          //     {
          //       name: "中北高新区",
          //       value: [112.570721979812, 37.9718734652464, 0],
          //     },
          //     {
          //       name: "清徐开发区",
          //       value: [112.365286246971, 37.6133580518845, 0],
          //     },
          //     {
          //       name: "阳曲示范区",
          //       value: [112.679409, 38.064621, 0],
          //     },
          //     {
          //       name: "西山示范区",
          //       value: [112.526291497339, 37.872764219517, 0],
          //     },
          //   ],
          // },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        let notClick = [
          "中北高新区-太忻",
          "阳曲示范区-太忻",
          "西山示范区-太忻",
          "阳曲县-太忻",
          "古交市-太忻",
          "尖草坪区-太忻",
          "万柏林区-太忻",
          "杏花岭区-太忻",
          "迎泽区-太忻",
        ];
        if (notClick.includes(item.name)) {
          return;
        }
        if (item.name == "太忻一体化经济区（太原区）") {
          this.changeActiveDistrict("太忻一体化");
          return;
        }
        // return;
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        if (this.district == item.name) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: item.dataIndex,
          });
          return;
        }
        this.district = item.name;
        this.getNodeList();
        if (item.componentSubType == "lines") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
          this.chartMap.dispatchAction({
            type: "select",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
        }
        this.$message({
          message: "成功切换至" + item.name,
          type: "success",
        });
      });
    },
    upDataTrapezoid() {
      let upDataOption = {
        series: [
          {
            data: [
              { num: this.nodeList.node1, value: 90, name: "在谈项目" },
              { num: this.nodeList.node2, value: 60, name: "已签约项目" },
              { num: this.nodeList.node3, value: 30, name: "已开工项目" },
              // { num: this.nodeList.node4, value: 20, name: "已投产项目" },
            ],
          },
        ],
      };
      this.chartTrapezoid.setOption(upDataOption);
    },
  },
};
</script>
<style lang="less" scoped>
.content-box {
  box-sizing: border-box;
  padding: 30px 20px;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  .c-left {
    flex: 0 0 66%;
    display: flex;
    flex-direction: column;
    .c-l-top {
      flex: 0 0 34.5%;
      margin-bottom: 20px;
    }
    .c-l-bottom {
      flex: 1;
      display: flex;
    }
  }
  .c-right {
    flex: 0 0 33%;
  }
}
.shadow-box {
  text-align: left;
  box-sizing: border-box;
  padding: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
}
.title-box {
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
.project-list {
  margin-top: 18px;
  // display: flex;
  // justify-content: space-between;
  li {
    margin-right: 20px;
    float: left;
    padding: 30px;
    width: 300px;
    height: 174px;
    cursor: default;
    img {
      width: 47px;
      height: 47px;
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #666666;
      margin-top: 5px;
    }
    .num {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      span {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 10px;
        vertical-align: sub;
      }
    }
    // &:nth-of-type(1) {
    //   background: url("~@img/project/bg-xmgl-01.png") no-repeat;
    //   background-size: 168px 174px;
    //   span {
    //     color: #ff7272;
    //   }
    // }
    &:nth-of-type(1) {
      background: url("~@img/project/bg-xmgl-02.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #ffaf36;
      }
    }
    &:nth-of-type(2) {
      background: url("~@img/project/bg-xmgl-03.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #17d0b1;
      }
    }
    &:nth-of-type(3) {
      background: url("~@img/project/bg-xmgl-04.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #78a3ff;
      }
    }
    &:nth-of-type(4) {
      background: url("~@img/project/bg-xmgl-05.png") no-repeat;
      background-size: 168px 174px;
      span {
        color: #9155dc;
      }
    }
  }
  .last {
    width: auto;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    p {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    .yuan {
      margin-right: 10px;
      display: inline-block;
      width: 14px;
      height: 14px;
      opacity: 0.5;
      border-radius: 7px;
      vertical-align: middle;
    }
    .num {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    p:nth-of-type(1) {
      .yuan {
        background: #3ed8be;
      }
      .num {
        color: #3ed8be;
      }
    }
    p:nth-of-type(2) {
      .yuan {
        background: #78a3ff;
      }
      .num {
        color: #78a3ff;
      }
    }
    p:nth-of-type(3) {
      .yuan {
        background: #a472e2;
      }
      .num {
        color: #a472e2;
      }
    }
  }
}
.table-box {
  height: calc(100% - 96px);
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-color: #ccc #eee;
  scrollbar-width: 6px;
  scrollbar-width: thin;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #ccc, #ccc);
  }
  &::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 10px;
  }
}
table {
  width: 100%;
  text-align: center;
  tr {
    border-top: 6px solid #fff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor: default;

    th {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      height: 42px;
      background: #f5f6f7;
      border-right: 4px solid #fff;
      &:last-of-type {
        border-right: 0;
      }
    }
    td {
      height: 42px;
      background: rgba(245, 246, 248, 0.6);

      &:first-of-type {
        font-weight: bold;
        color: #446db3;
      }
      &:last-of-type {
        font-weight: bold;
      }
    }
    &:nth-of-type(odd) {
      background: #f5f6f7;
    }
  }
}
.chart-map {
  position: relative;
  margin-right: 20px;
  flex: 0 0 55%;
  height: 100%;
  .chart-self {
    width: 100%;
    height: 100%;
  }
  .ty {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 34px;
    line-height: 32px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    border: 1px solid #5889dc;
    // background: transparent;
    // color: #5889dc;
    background: #5889dc;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    cursor: default;
    z-index: 999;
    opacity: 0.6;
  }
  .ty.active {
    opacity: 1;
  }
  // .tx {
  //   box-sizing: border-box;
  //   position: absolute;
  //   left: 140px;
  //   top: 0;
  //   height: 34px;
  //   line-height: 31px;
  //   font-size: 12px;
  //   font-family: Microsoft YaHei;
  //   font-weight: 400;
  //   color: #2953a8;
  //   vertical-align: middle;
  //   z-index: 99;
  //   border: 1px solid #2953a8;
  //   border-radius: 10px;
  //   padding: 0 10px;
  //   background: #fff;
  //   cursor: pointer;
  //   span.yuan {
  //     margin-right: 4px;
  //     position: relative;
  //     display: inline-block;
  //     width: 12px;
  //     height: 12px;
  //     background: #2953a8;
  //     border-radius: 50%;
  //     vertical-align: middle;
  //     span {
  //       position: absolute;
  //       left: 2px;
  //       top: 2px;
  //       width: 8px;
  //       height: 8px;
  //       background: #ffffff;
  //       border-radius: 50%;
  //       z-index: 99;
  //     }
  //   }
  //   span {
  //     vertical-align: middle;
  //   }
  //   &.active {
  //     background: #2953a8;
  //     color: #fff;
  //   }
  //   &.active span {
  //     font-weight: bold;
  //   }
  //   &.active span.yuan {
  //     background: #fff;
  //     span {
  //       background: #2953a8;
  //     }
  //   }
  // }
}
.trapezoid {
  margin-left: 60px;
  flex: 1;
  .title-box {
    text-align: center;
  }
  .chart-trapezoid {
    width: 100%;
    // height: calc(100% - 117px);
    height: calc(100%);
    .chart-self {
      width: 100%;
      height: 100%;
    }
  }
  .last {
    width: auto;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    p {
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    .yuan {
      margin-right: 10px;
      display: inline-block;
      width: 14px;
      height: 14px;
      opacity: 0.5;
      border-radius: 7px;
      vertical-align: middle;
    }
    .num {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    p:nth-of-type(1) {
      .yuan {
        background: #3ed8be;
      }
      .num {
        color: #3ed8be;
      }
    }
    p:nth-of-type(2) {
      .yuan {
        background: #78a3ff;
      }
      .num {
        color: #78a3ff;
      }
    }
    p:nth-of-type(3) {
      .yuan {
        background: #a472e2;
      }
      .num {
        color: #a472e2;
      }
    }
  }
}

// 弹框
/deep/ .el-dialog--center .el-dialog__body {
  padding: 10px 0;
}

/deep/ .el-dialog {
  padding: 0 88px;
  top: 50%;
  margin-top: -214px !important;
  min-height: 428px;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
  .el-dialog__header {
    padding: 0;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px dashed #dddddd;

    .el-dialog__title {
      display: block;
      line-height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button {
      padding: 0;
      width: 248px;
      height: 48px;
      border: 2px solid #446db3;
      border-radius: 10px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
    .el-button--primary {
      padding: 0;
      color: #fff;
      background: #446db3;
      box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    }
  }

  .d-content {
    width: 420px;
    margin: 0 auto;
    .label-name {
      margin: 10px 0 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 34px;
    }
    .label-input {
      padding-left: 12px;
      width: 420px;
      height: 32px;
      line-height: 32px;
      background: #f7f7f7;
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  }
}
.import /deep/ .el-dialog {
  margin-top: -182px !important;
  height: 364px;
}
.failed-dialog /deep/ .el-dialog {
  margin-top: -188px !important;
  height: 376px;
}
/deep/ .upload {
  text-align: left;
  .s-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}

.files {
  /deep/.el-upload__tip {
    margin-left: 16px;
    display: inline-block;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .upload-demo {
    min-height: 140px;
  }
  /deep/ .el-button {
    margin-top: 20px;
    padding: 0;
  }
  /deep/ .el-button--small {
    margin: 0;
    padding: 0;
    width: 133px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    vertical-align: middle;
    img {
      margin-right: 5px;
      position: relative;
      left: 0;
      top: 1px;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 30px 0px 30px 200px;
}
/deep/ .el-upload-list__item-name {
  text-align: left;
}
/deep/ .not-padding .el-dialog__body {
  padding: 30px 0;
  .tips {
    text-align: left;
    width: 100%;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .remind-box {
    margin-bottom: 30px;
    box-sizing: border-box;
    padding: 18px 32px 32px 18px;
    // width: 645px;
    height: 134px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666;
    line-height: 33px;
    text-align: left;
    overflow-y: auto;
    scrollbar-color: #ccc #eee;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #ccc, #ccc);
    }
    &::-webkit-scrollbar-track {
      background: #eee;
      border-radius: 10px;
    }
  }
}
// .content-box {
//   width: 1590px;
//   height: 809px;
//   transform-origin: 0 0;
// }
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1512 * 790
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .content-box {
    width: 1590px;
    height: 880px;
    transform-origin: 0 0;
    transform: scale(0.85);
    -moz-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -o-transform: scale(0.85);
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .content-box {
    width: 1590px;
    height: 880px;
    transform-origin: 0 0;
    transform: scale(0.74);
    -moz-transform: scale(0.74);
    -webkit-transform: scale(0.74);
    -o-transform: scale(0.74);
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .content-box {
    width: 1590px;
    height: 900px;
    transform-origin: 0 0;
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .left {
    flex: 0 0 240px;
  }
  .content-box {
    width: 1590px;
    height: 900px;
    transform-origin: 0 0;
    transform: scale(0.69);
    -moz-transform: scale(0.69);
    -webkit-transform: scale(0.69);
    -o-transform: scale(0.69);
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .content-box {
    width: 1590px;
    height: 900px;
    transform-origin: 0 0;
    transform: scale(0.57);
    -moz-transform: scale(0.57);
    -webkit-transform: scale(0.57);
    -o-transform: scale(0.57);
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .content-box {
    width: 1100px;
    height: 920px;
    transform-origin: 0 0;
    display: block;
    transform: scale(0.68);
    -moz-transform: scale(0.68);
    -webkit-transform: scale(0.68);
    -o-transform: scale(0.68);
    overflow-y: auto;
    scrollbar-color: #ccc #eee;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #ccc, #ccc);
    }
    &::-webkit-scrollbar-track {
      background: #eee;
      border-radius: 10px;
    }
  }
  .content-box .c-left .c-l-bottom {
    flex: 0 0 500px;
    height: 500px;
    margin-bottom: 20px;
  }
}
</style>
